<script setup lang="ts">
import { inject } from 'vue'

// 通过 inject 接收并使用 Provide 注入的值
const count = inject<number>('count')

// 接收 传递过来的 updateCount 可以用来修改数据
// 1. 可以用非空断言避免为空
// const updateCount = inject<(num: number) => void>('updateCount')!
// 2. 可以通过定义默认值来解决 警告的问题
const updateCount = inject<(num: number) => void>('updateCount', (num: number) => {
  console.log(num)
})
</script>

<template>
  <div class="child-page" style="padding: 50px; border: 10px solid #ccc">
    child 组件-count{{ count }} <button @click="updateCount(2)">修改count</button>
  </div>
</template>
